<template>
	<view>
		<view class="edgeInsetTop"></view>
		<view class="wanl-order">
			<!-- 头部 -->
			<view class="header">
				<image :src="$wanlshop.appstc('/order/img_detail_bg.png')" class="img-bg"></image>
				<view class="content">
					<view>
						<view class="status-text">{{
              getStatusText(orderData.state)
            }}</view>
						<!-- <view class="DiDian">请前往xx-xx进行核销</view> -->
						<view class="right">
							<image src="../../../static/images/bank/cha.png" mode="scaleToFill" />
						</view>
						<view class="reason"><text class="reason-text"
								v-if="orderData.statetime">{{ orderData.statetime }}</text></view>
					</view>
					<image :src="$wanlshop.appstc('/order/' + getImg(orderData.state))" class="status-img"
						mode="widthFix"></image>
				</view>
			</view>
			<!-- 详情 -->
			<view class="address cu-list menu-avatar" v-if="!orderData.spot_id">
				<!-- 物流状态 -->
				<view class="cu-item" @tap="onLogistics(orderData.id)" v-if="
            orderData.state != 7 &&
            orderData.state != 1 &&
            orderData.state != 2 &&
            logisticsType
          ">
					<view class="cu-avatar round wanl-bg-blue"><text class="wlIcon-yunshuzhong"></text></view>
					<view class="content">
						<view>
							<text class="text-cut-2 text-sm wanl-pip">{{ orderData.logistics.status }} -
								{{ orderData.logistics.context }}</text>
						</view>
						<view class="wanl-gray">
							<text class="text-sm">{{ orderData.logistics.time }}</text>
						</view>
					</view>
					<view class="action">
						<text class="wlIcon-fanhui2 wanl-gray"></text>
					</view>
				</view>
				<!-- 地址 -->
				<view class="cu-item">
					<view class="cu-avatar round wanl-bg-orange"><text class="wlIcon-weizhi1"></text></view>
					<view class="content">
						<view>
							<text class="wanl-pip margin-right-sm">{{
                orderData.address.name
              }}</text>
							<text class="wanl-gray text-sm">{{
                orderData.address.mobile
              }}</text>
						</view>
						<view class="wanl-pip text-cut-2 text-sm">
							{{ orderData.address.address.replace(/\//g, " ") }}
							<text class="margin-left-xs"
								v-if="orderData.address.address_name">（{{ orderData.address.address_name }}）附近</text>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-else style="width: 700rpx;height: 250rpx;background: #FFFFFF;border-radius: 16rpx;margin: 0 auto; margin-top: 20rpx;   display: flex;
    flex-direction: row;align-items: center;">
				<image :src="$wanlshop.oss(orderData.spot.img)" style="width: 180rpx;
height: 180rpx;border-radius: 20rpx;margin-left: 17rpx;"></image>
				<view class="" style="margin-left: 21rpx;margin-right: 47rpx;">
					<view class="" style="font-weight: 400;
font-size: 30rpx;
color: #333333;margin-bottom: 27rpx;">
						{{ orderData.spot.name }}
					</view>
					<view class="" style="font-weight: 400;
font-size: 24rpx;
color: #666666;margin-bottom: 31rpx;">
						{{ orderData.spot.address }}
					</view>
					<view class="" style="font-weight: 400;
font-size: 24rpx;
color: #E60013;">

					</view>
				</view>
			</view>
			<!-- :style="orderData.spot_id ? { marginTop: '240rpx' } : {}" -->
			<view class="lists bg-white" v-if="orderData.order_no">
				<view class="shopname text-sm padding-top-bj" @tap="onShop(orderData.shop_id)">
					<text class="wlIcon-dianpu1 margin-right-sm"></text>
					<text class="padding-right-xs wanl-black">{{
            orderData.shop.shopname
          }}</text>
					<text class="wlIcon-fanhuigengduo"></text>
				</view>
				<view class="cu-list menu-avatar">
					<block v-for="(item, index) in orderData.goods" :key="item.id">
						<view class="cu-item">
							<view class="cu-avatar radius" :style="{
                  backgroundImage:
                    'url(' + $wanlshop.oss(item.image, 77, 77) + ')',
                }" @tap="onGoods(item.goods_id)"></view>
							<view class="content" @tap="onGoods(item.goods_id)">
								<view class="text-cut-2">{{ item.title }}</view>
								<view class="wanl_sku text-sm">
									<text class="wanl-gray-dark">{{ item.difference }}</text>
								</view>
							</view>
							<view class="action text-sm">
								<view class="wanl-gray text-price" v-if="orderData.is_integral == 0">{{ item.price }}
								</view>
								<view class="wanl-gray">x {{ item.number }}</view>
								<view class="text-orange" v-if="orderData.is_integral == 0">实付
									<text class="text-price">{{item.actual_payment }}</text>
								</view>
								<view class="text-sm text-black" v-if="orderData.is_integral == 1"
									style="display: flex;">
									<span>￥{{ item.price }}+</span>
									<image src="../../../static/images/jifen.png" mode="widthFix" style="width: 40rpx;">
									</image>
									<span style="">{{ item.deduct_points }}</span>
								</view>
							</view>
						</view>
						<view class="flex justify-end padding-lr-bj padding-bottom">
							<!-- 1.0.2升级 取消订单后去掉退款按钮 -->
							<button class="cu-btn line-black sm" @tap="
                  onRefund(
                    orderData.id,
                    item.refund_status,
                    item.refund_id,
                    index
                  )
                " v-if="orderData.is_refund == 0">
								<!-- v-if="
				  orderData.state == 2 ||
				  orderData.state == 3 ||
				  orderData.state == 4 ||
				  orderData.state == 6
				" -->
								{{ getRefund(item.refund_status) }}
							</button>
						</view>
					</block>
				</view>
				<!-- 价格信息 -->
				<view class="price padding-lr-bj padding-bottom-bj text-sm">
					<view>
						<text> 商品总价 </text>
						<text class="text-price" v-if="orderData.is_integral == 0"> {{ orderData.pay.order_price }}
						</text>
						<view class="text-sm text-black" v-else style="display: flex;">
							<span>￥{{ orderData.pay.order_price }}+</span>
							<image src="../../../static/images/jifen.png" mode="widthFix" style="width: 40rpx;"></image>
							<span style="">{{ orderData.pay.score }}</span>
						</view>
					</view>
					<view v-if="orderData.state != 9">
						<text> 运费 </text>
						<text class="text-price"> {{ orderData.pay.freight_price }} </text>
					</view>
					<view>
						<text> 优惠</text>
						<text class="text-price"> {{ orderData.pay.discount_price }} </text>
					</view>
					<view v-if="orderData.state != 9">
						<text> 总价 </text>
						<text class="text-price" v-if="orderData.is_integral == 0"> {{ orderData.pay.price }} </text>
						<view class="text-sm text-black" v-else style="display: flex;">
							<span>￥{{ orderData.pay.price }}+</span>
							<image src="../../../static/images/jifen.png" mode="widthFix" style="width: 40rpx;"></image>
							<span style="">{{ orderData.pay.score }}</span>
						</view>
					</view>

					<view class="text-sm" v-if="orderData.pay.actual_payment != 0">
						<text> 实付款 </text>
						<text class="text-price wanl-orange">
							{{ orderData.pay.actual_payment }}
						</text>
					</view>
				</view>

				<view class="HeXiao" v-if="orderData.spot_id&&orderData.state!=1">
					<view class="HeXiao-title">核销码</view>
					<view class="HeXiao-time" v-if="orderData.qrcode.length > 1">
						有效期至：{{ orderData.out_time }}
					</view>
					<view v-if="orderData.qrcode.length > 1">
						<view class="HeXiao-day"></view>
						<view class="HeXiao-Ma" v-for="(item, index) in orderData.qrcode" :key="index">
							<view class="BianHao">
								{{ item.salt }}
								<span v-if="item.status == 0">未使用</span>
								<span v-if="item.status == 1">已使用</span>
								<span v-if="item.status == 2">已过期</span>
								<span v-if="item.status == 3">未开始</span>
							</view>
							<view>
								<button @click="toggleModal(item)">
									查看核销码
								</button>
							</view>
						</view>
						<view class="HeXiao-ZhuYi">
							注：有效期前不可扫码核销，过去后也不可扫码核销过期金额自动退回,未开始前不可核销
						</view>
					</view>
					<view v-else class="EWM">
						<!-- {{$wanlshop.oss(orderData.qrcode[0].image)}} -->
						<image :src="$wanlshop.oss(orderData.qrcode[0].image)" mode="widthFix" style="width: 320rpx">
						</image>
					</view>
				</view>
			</view>
			<view class="order bg-white margin-top-bj padding-bj" v-if="orderData.order_no">
				<view class="title" @tap="toMore">
					<view class="text-sm">订单详情</view>
					<view>
						<text class="wlIcon-fanhui3" v-if="infoMore"></text>
						<text class="wlIcon-fanhui4" v-else></text>
					</view>
				</view>
				<view class="text-sm">
					<view class="item">
						<text class="wanl-gray" style="width: 160rpx">订单编号：</text>
						<text> {{ orderData.order_no }} </text>
					</view>
					<view class="item">
						<text class="wanl-gray" style="width: 160rpx">支付交易号：</text>
						<text> {{ orderData.pay.pay_no }} </text>
					</view>
					<view class="item">
						<text class="wanl-gray" style="width: 160rpx">创建时间：</text>
						<text> {{ orderData.createtime_text }} </text>
					</view>
					<block v-if="infoMore">
						<view class="item" v-if="orderData.paymenttime">
							<text class="wanl-gray-dark" style="width: 160rpx">付款时间：</text>
							<text> {{ orderData.paymenttime_text }} </text>
						</view>
						<view class="item" v-if="orderData.delivertime">
							<text class="wanl-gray-dark" style="width: 160rpx">发货时间：</text>
							<text> {{ orderData.delivertime_text }} </text>
						</view>
						<view class="item" v-if="orderData.taketime">
							<text class="wanl-gray-dark" style="width: 160rpx">收货时间：</text>
							<text> {{ orderData.taketime_text }} </text>
						</view>
					</block>
				</view>
				<view class="foot solid-top">
					<view @tap="toChat(orderData.shop_id)">
						<text class="wlIcon-xiaoxizhongxin text-sm"></text>联系卖家
					</view>
				</view>
			</view>
			<view class="edgeInsetBottom"> </view>
		</view>
		<!-- 模态框遮罩层 -->
		<view class="modal-mask" v-if="isModalVisible" @click="closeModal">
			<view class="modal-dialog" @click.stop>
				<view class="modal-content">
					<view class="modal-header">
						<view class="modal-title">核销码</view>
						<view class="modal-img">
							<image :src="$wanlshop.oss(currentCode.image)" mode="widthFix" style="width: 320rpx">
							</image>
							<!-- <image src="../../../static/images/bank/ABC.png" mode="scaleToFill" /> -->
						</view>
						<view class="model-ZhuYi"> 请将上方二维码展示给 </view>
						<view class="model-ZhuYi">商家进行核销</view>
						<view class="cha" @click="closeModal">
							<image src="../../../static/images/bank/dd1.png" mode="scaleToFill" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isModalVisible: false,
				currentCode: {},
				list: [{
						id: 1,
						code: "255454545454",
						ShiYong: "未使用",
						btn: "查看核销码",
					},
					{
						id: 2,
						code: "255454545454",
						ShiYong: "未使用",
						btn: "查看核销码",
					},
					{
						id: 3,
						code: "255454545454",
						ShiYong: "已使用",
						btn: "查看核销码",
					},
				],
				nuclearCodesCount: 1, // 或者设置为大于1的值
				orderData: {
					order_no: "",
					address: {
						name: "加载中...",
						mobile: "",
						address: "",
						address_name: "",
					},
					logistics: {
						context: "",
						status: "",
						time: "",
					},
					statetime: "",
				},
				logisticsType: false,
				infoMore: false,
			};
		},
		onLoad(option) {
			this.loadData({
				id: option.id
			});
		},
		methods: {
			toggleModal(item) {
				this.currentCode = item;
				this.isModalVisible = true;
			},
			closeModal() {
				this.isModalVisible = false;
			},
			showCode() {
				// 在这里添加查看核销码的逻辑
				console.log("查看核销码:", this.orderData);
			},
			// 获取订单
			async loadData(data) {
				console.log(data, '21212');
				await uni.request({
					url: "/wanlshop/order/getOrderInfo",
					data: data,
					success: (res) => {
						console.log(res, '7878787878');
						this.orderData = res.data;
						this.logisticsType = true;
						if (res.data.state == 0) {
							this.orderData.statetime = "剩余时间0";
						} else if (res.data.state == 1) {

							var diff =
								res.data.createtime +
								res.data.config.cancel * 86400 -
								Date.parse(new Date()) / 1000;
							var days = Math.floor(diff / 86400);
							var hours = Math.floor((diff % 86400) / 3600);
							var minutes = Math.floor(((diff % 86400) % 3600) / 60);
							if (minutes > 0) {
								this.orderData.statetime = "还剩" + minutes + "分自动关闭订单";
							}
							if (hours > 0) {
								this.orderData.statetime =
									"还剩" + hours + "天" + minutes + "分自动关闭订单";
							}
							if (days > 0) {
								this.orderData.statetime =
									"还剩" +
									days +
									"天" +
									hours +
									"小时" +
									minutes +
									"分自动关闭订单";
							}
						} else if (res.data.state == 2) {
							this.orderData.statetime = "等待卖家发货";
						} else if (res.data.state == 3) {
							var diff =
								res.data.delivertime +
								res.data.config.receiving * 86400 -
								Date.parse(new Date()) / 1000;
							var days = Math.floor(diff / 86400);
							var hours = Math.floor((diff % 86400) / 3600);
							var minutes = Math.floor(((diff % 86400) % 3600) / 60);
							if (minutes > 0) {
								this.orderData.statetime = "还剩" + minutes + "分自动确认收货";
							}
							if (hours > 0) {
								this.orderData.statetime =
									"还剩" + hours + "天" + minutes + "分自动确认收货";
							}
							if (days > 0) {
								this.orderData.statetime =
									"还剩" +
									days +
									"天" +
									hours +
									"小时" +
									minutes +
									"分自动确认收货";
							}
						} else if (res.data.state == 4) {
							var diff =
								res.data.taketime +
								res.data.config.comment * 86400 -
								Date.parse(new Date()) / 1000;
							var days = Math.floor(diff / 86400);
							var hours = Math.floor((diff % 86400) / 3600);
							var minutes = Math.floor(((diff % 86400) % 3600) / 60);
							if (minutes > 0) {
								this.orderData.statetime = "还剩" + minutes + "分自动评论";
							}
							if (hours > 0) {
								this.orderData.statetime =
									"还剩" + hours + "天" + minutes + "分自动评论";
							}
							if (days > 0) {
								this.orderData.statetime =
									"还剩" + days + "天" + hours + "小时" + minutes + "分自动评论";
							}
						} else if (res.data.state == 6) {
							this.orderData.statetime = res.data.dealtime_text;
						} else if (res.data.state == 7) {
							this.orderData.statetime = "订单已取消";
						} else if (res.data.state == 8) {
							this.orderData.statetime = "预计" + res.data.cometime + '前完成备货';
						} else if (res.data.state == 9) {
							this.orderData.statetime = "请前往" + res.data.spot.name + "进行核销";
						}
					},
				});
			},
			getImg(status) {
				return [
					"img_order_payment3x.png",
					"img_order_send3x.png",
					"img_order_received3x.png",
					"img_order_signed3x.png",
					"img_order_closed3x.png",
					"img_order_signed3x.png",
					"img_order_closed3x.png",
				][status - 1];
			},
			getStatusText(status) {
				console.log(status, '87777777777');
				return [
					"等待您付款",
					"付款成功",
					"待收货",
					"待评论",
					"退款订单",
					"订单已完成",
					"交易关闭",
					"待自提",
					"待核销",
				][status - 1];
			},
			getRefund(status) {
				return ["退款", "退款中", "待退货", "退款完成", "退款关闭", "退款被拒"][
					status
				];
			},
			/**
			 * 进入退款
			 * @param {Object} order_id 订单ID
			 * @param {Object} status 售后状态:0=未退款,1=退款中,2=待退货,3=退款完成
			 */
			onRefund(order_id, refund_status, refund_id, index) {
				if (refund_status == 0) {
					//申请退款
					this.$wanlshop.to(
						`/pages/user/refund/apply?data=${JSON.stringify({
            order_id: this.orderData.id,
            order_type: "goods",
            goods: this.orderData.goods[index],
            freight_type: this.orderData.freight_type,
            discount_price: this.orderData.pay.discount_price,
            goods_number: this.orderData.goods.length,
          })}`
					);
				} else {
					// 查看详情
					this.$wanlshop.to(`/pages/user/refund/details?id=${refund_id}`);
				}
			},
			// 折叠项
			toMore() {
				this.infoMore = !this.infoMore;
			},
		},
	};
</script>

<style>
	.wanl-order .header {
		width: 100%;
		height: 180rpx;
		position: relative;
		background-color: #f72b36;
	}

	.wanl-order .header .img-bg {
		width: 100%;
		height: 180rpx;
	}

	.wanl-order .header .content {
		width: 100%;
		height: 180rpx;
		position: absolute;
		z-index: 10;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 60rpx;
		box-sizing: border-box;
	}

	.wanl-order .header .status-text {
		font-size: 34rpx;
		line-height: 34rpx;
		color: #fefefe;
	}

	.wanl-order .header .reason {
		font-size: 24rpx;
		line-height: 24rpx;
		color: rgba(254, 254, 254, 0.75);
		padding-top: 15rpx;
		display: flex;
		align-items: center;
	}

	.wanl-order .header .reason-text {
		padding-right: 12rpx;
	}

	.wanl-order .header .status-img {
		width: 100rpx;
		height: 100rpx;
		display: block;
	}

	.wanl-order .lists .shopname {
		margin: 25rpx 25rpx 30rpx 25rpx;
	}

	.wanl-order .lists .price>view {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 40rpx;
	}

	.wanl-order .lists .cu-btn {
		font-size: 22rpx;
		padding: 0 14rpx;
	}

	.cu-list.menu-avatar>.cu-item {
		height: 160rpx;
	}

	.cu-list.menu-avatar>.cu-item .content {
		line-height: 1.4;
	}

	.wanl-order .order .title {
		display: flex;
		align-items: center;
		justify-items: center;
		justify-content: space-between;
	}

	.wanl-order .order .item {
		display: flex;
		padding-top: 30rpx;
	}

	.wanl-order .order .foot {
		display: flex;
		justify-content: space-around;
		justify-items: center;
		align-items: center;
		padding-top: 25rpx;
		margin-top: 20rpx;
	}

	.wanl-order .order .foot text[class*="wlIcon-"] {
		color: #0081ff;
		margin-right: 10rpx;
		font-size: 32rpx;
	}

	.HeXiao {
		padding: 20rpx;
	}

	.HeXiao .HeXiao-day {
		font-size: 24rpx;
		color: #999;
		padding: 15rpx 0rpx;
	}

	.HeXiao .HeXiao-Ma {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		margin-bottom: 30rpx;
	}

	.HeXiao .HeXiao-Ma span {
		margin-left: 20rpx;
		color: red;
	}

	.HeXiao .HeXiao-Ma button {
		width: 300rpx;
		height: 50rpx;
		background: #2c4076;
		border-radius: 25rpx;
		border: 1px solid #2c4076;
		font-weight: 400;
		font-size: 25rpx;
		color: #ffffff;
	}

	.HeXiao .HeXiao-ZhuYi {
		font-size: 24rpx;
		color: #999;
	}

	.EWM {
		padding: 40rpx 0;
		display: flex;
		justify-content: center;
	}

	.EWM img {
		width: 35%;
		border: 1px solid red;
	}

	.modal-mask {
		position: fixed;
		z-index: 9998;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.modal-header {
		width: 600rpx;
		height: 560rpx;
		background-color: white;
		position: absolute;
		top: 60vw;
		left: 10vw;
		border-radius: 30rpx;
	}

	.modal-title {
		text-align: center;
		padding-top: 40rpx;
		font-weight: bold;
	}

	.modal-img {
		margin-top: 20rpx;
		text-align: center;
	}

	.modal-img image {
		width: 300rpx;
		height: 300rpx;
		padding: 20rpx;
		border: 3rpx dashed #e5e5e5;
	}

	.model-ZhuYi {
		text-align: center;
		font-weight: 500;
		font-size: 24rpx;
		color: #888888;
	}

	.cha {
		text-align: center;
		margin-top: 60rpx;
	}

	.cha image {
		width: 52rpx;
		height: 120rpx;
	}

	.right {
		position: absolute;
		right: 66rpx;
		top: 40rpx;
	}

	.right image {
		width: 120rpx;
		height: 120rpx;
	}

	.DiDian {
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
		margin-top: 14rpx;
	}

	.HeXiao .HeXiao-Ma uni-button[data-v-43dc9af6] {
		width: auto;
		height: auto;
		border-radius: 40rpx;
	}

	.HeXiao-time {
		margin-top: 31rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #888888;
	}

	.BianHao {
		font-weight: 500;
		font-size: 28rpx;
		color: #121212;
		display: flex;
		align-items: center;
	}

	.BianHao span {
		font-weight: 500;
		font-size: 26rpx;
		color: #e60012;
	}

	.HeXiao-title {
		font-weight: bold;
		font-size: 28rpx;
		color: #121212;
	}
</style>